<route lang="json5" type="deviceList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '财务管理 > 会员情况',
    enablePullDownRefresh:false,
  },
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import { getDeviceList } from '@/api/device'
import deviceDetail from '@/components/form/device-detail.vue'
import deviceImg from '@/components/form/device-img.vue'
import hardwareConfig from '@/components/form/hardware-config.vue'
import softwareConfig from '@/components/form/software-config.vue'

function handleSearch(e) {
  // 处理搜索逻辑
  console.log('搜索内容:', e.value)
}

const sbTypeList = [
  { label: '余币降序', value: '1' },
  { label: '余币升序', value: '2' },
  { label: '消费降序', value: '3' },
  { label: '消费升序', value: '4' },
]
const sb_type = ref('1') // 单选框的默认值

const loadState = ref<'loading' | 'error' | 'finished'>('loading')

const total = ref(50) // 总条数
const dataList = ref([]) // 列表数据
function loadMore() {
  if (loadState.value === 'finished') {
    console.log('加载完成')
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      console.log('没有更多数据了')
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const collapse = ref<string[]>([])

const software = ref()
const deviceDetailRef = ref()
const hardware = ref()
const deviceImgRef = ref()
function handleConfig() {
  // deviceDetailRef.value.show = true
}
function paging() {
  // 分页逻辑
  console.log('分页加载数据')
}
const showSheet = ref(false)
const showVipMsg = ref(false) // 会员详情弹窗

const sysSwitch = ref(true)
const mchSwitch = ref(true)
const czNum = ref(0)
function jumpTo(url: string, type: string = 'page') {
  if (type === 'tab') {
    uni.switchTab({
      url,
    })
  }
  else {
    uni.navigateTo({
      url,
    })
  }
}
const showVipCZ = ref(false) // 会员充值弹窗
const czType = ref(1) // 0 减币 1 充币
function vipCZ(type: number) {
  console.log('会员充币类型:', type)
  czType.value = type
  showVipCZ.value = true
}
</script>

<template>
  <view class="pages">
    <view class="wot-list-top-wrap">
      <view class="search">
        <wd-search placeholder="输入搜索会员编号" cancel-txt="搜索" @cancel="handleSearch" />
      </view>
      <view class="bg-#fff pb-20rpx">
        <view class="sb-type">
          <view class="title">
            排序规则
          </view>
          <wd-radio-group v-model="sb_type" class="radio-group" shape="dot" inline>
            <wd-radio v-for="item in sbTypeList" :key="item.value" :value="item.value">
              {{ item.label }}
            </wd-radio>
          </wd-radio-group>
        </view>
      </view>
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="4">
            <view class="wot-item">
              头像
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="wot-item">
              会员ID
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              名称
            </view>
          </wd-col>
          <wd-col :span="3">
            <view class="wot-item">
              余额
            </view>
          </wd-col>
          <wd-col :span="3">
            <view class="wot-item">
              余币
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              消费额
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view class="wot-list pb-safe">
      <view v-for="(item, index) in dataList" :key="index" class="wot-row">
        <wd-row>
          <wd-col :span="4">
            <view class="wot-item">
              <wd-img :width="30" :height="30" round src="https://img0.baidu.com/it/u=508587950,1881951869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=554" preview-src="https://img0.baidu.com/it/u=508587950,1881951869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=554" :enable-preview="true" />
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="wot-item">
              17800001
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              Abby | hbbahsd
            </view>
          </wd-col>
          <wd-col :span="3">
            <view class="wot-item">
              0.00
            </view>
          </wd-col>
          <wd-col :span="3">
            <view class="wot-item">
              23
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              0.00
            </view>
          </wd-col>
        </wd-row>
        <view class="flex justify-end pr-40rpx">
          <view class="openid">
            openid: oW_npwsTMKPDstXYHIPqy6NGTP5M
          </view>
          <wd-tag type="primary" size="small" @click="showSheet = true">
            更多
          </wd-tag>
        </view>
      </view>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
      <wd-action-sheet v-model="showSheet" title="【 会员ID: vip77199170 > 操作 】">
        <view style="padding: 30rpx 0 200rpx;">
          <view class="settings" @click="showVipMsg = true">
            会员详情
          </view>
          <view class="settings" @click="vipCZ(1)">
            会员充币
          </view>
          <view class="settings" @click="vipCZ(0)">
            会员减币
          </view>
          <view class="settings" @click="jumpTo('/pages-sub/finance/ybRecord')">
            余币明细
          </view>
        </view>
      </wd-action-sheet>
    </view>

    <!-- 会员详情弹窗 start -->
    <wd-popup v-model="showVipMsg" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="overflow: hidden;border-radius:32rpx 32rpx 0 0;" @close="showVipMsg = false">
      <view class="pt-40rpx text-center">
        <wd-img :width="60" :height="60" round src="https://img0.baidu.com/it/u=508587950,1881951869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=554" preview-src="https://img0.baidu.com/it/u=508587950,1881951869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=554" :enable-preview="true" />
      </view>
      <view class="vipMsg">
        <view class="m-row">
          <view class="m-label">
            id：
          </view>
          17800001
        </view>
        <view class="m-row">
          <view class="m-label">
            支付开关（系统）：
          </view>
          <wd-switch v-model="sysSwitch" size="18px" />
        </view>
        <view class="m-row">
          <view class="m-label">
            支付开关（商户）：
          </view>
          <wd-switch v-model="mchSwitch" size="18px" />
        </view>
        <view class="m-row">
          <view class="m-label">
            用户账号：
          </view>
          vip78371236
        </view>
        <view class="m-row">
          <view class="m-label">
            昵称：
          </view>
          xxx
        </view>
        <view class="m-row">
          <view class="m-label">
            账户余额：
          </view>
          0.00
        </view>
        <view class="m-row">
          <view class="m-label">
            账户余币：
          </view>
          125
        </view>
        <view class="m-row">
          <view class="m-label">
            消费总额：
          </view>
          0.00
        </view>
        <view class="m-row">
          <view class="m-label">
            联系电话：
          </view>
          0
        </view>
        <view class="m-row">
          <view class="m-label">
            身份ID：
          </view>
          kjasjkbdjasndksandk
        </view>
        <view class="m-row">
          <view class="m-label">
            注册时间：
          </view>
          2025-11-29 16:20:15
        </view>
      </view>
    </wd-popup>
    <!-- 会员详情弹窗 end -->

    <!-- 会员充值弹窗 start -->
    <wd-popup v-model="showVipCZ" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="overflow: hidden;border-radius:32rpx 32rpx 0 0;" @close="showVipMsg = false">
      <view class="wot-form-title">
        【 会员: vip77199170 ＞ {{ czType === 1 ? '充币' : '减币' }} 】
      </view>
      <view class="cz-content">
        <view class="cz-box">
          <view class="m-label">
            当前余币：
          </view>
          <view>0</view>
        </view>
        <view class="cz-box">
          <view class="m-label">
            {{ czType === 1 ? '充币' : '减币' }}数量：
          </view>
          <wd-input-number v-model="czNum" :min="0" :max="10" />
        </view>
        <view class="cz-btn">
          <wd-button block>
            给会员{{ czType === 1 ? '充币' : '减币' }}
          </wd-button>
        </view>
        <view class="desc">
          <view class="font-bold">
            说明：
          </view>
          会员充/减币，便于会员给设备灵活上币；<br>
          会员充/减币服务费按：1币/千二 收取（暂定）；<br>
          如“服务费余额不足”请在<br>
          如"服务费余额不足"请在
          <view class="i-link inline" @click="jumpTo('/pages/mine/index', 'tab')">
            “我的”>“充币服务费”
          </view>
        </view>
      </view>
    </wd-popup>
    <!-- 会员详情弹窗 end -->
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.sb-type {
  width: 80%;
  padding: 10rpx auto;
  background-color: #fff;
  display: flex;
  margin: auto;
  .title {
    padding-right: 20rpx;
  }
  .radio-group {
    flex: 1;
  }
}
.i-btn{
    width: 80%;
    margin: 50rpx auto 30rpx;
}
.scroll-view {
    height: calc(100vh - 370rpx - env(safe-area-inset-bottom));
}
.settings{
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    background-color: $uni-color-primary;
    width: 65%;
    line-height: 62rpx;
    text-align: center;
    margin: 0 auto 30rpx;
    border-radius: 6rpx;
}
.openid{
    font-size: 12px;
    color: #999999;
    padding-right: 10px;
}
.vipMsg {
  padding: 30rpx 40rpx;
  .m-row {
    padding: 10rpx 0;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    border-bottom: 1px solid #ececec;
    line-height: 56rpx;
    &:last-child {
      border-bottom: none;
    }
    .m-label {
      width: 260rpx;
      text-align: right;
    }
  }
}
.cz-content{
  width: 85%;
  margin: auto;
  padding-bottom: 100rpx;
  .cz-box {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #ECECEC;
  .m-label {
    width: 220rpx;
    text-align: right;
    padding-right: 20rpx;
  }
}
.cz-btn {
    width: 70%;
    margin: 40rpx auto;
  }
.desc {
  font-size: 24rpx;
  color: #FAAB0C;
  line-height: 40rpx;
  padding: 0 40rpx 30rpx;
  font-size: 24rpx;
}
}
</style>
